<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button size="mini" type="primary" @click="dialogTableVisible = true">新增</el-button>
      </div>
      <div class="text item">
        <el-table
          :data="list"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            type="index"
            width="50"
            label="序号"
          />
          <el-table-column label="商品图片" width="150" align="center">
            <template slot-scope="scope">
              <img class="list_img" :src="scope.row.pic" style="width:100px;height:100px">
            </template>
          </el-table-column>
          <el-table-column label="活动时间" width="300" align="center">
            <template slot-scope="scope">
              <div class="text">开始时间：{{ scope.row.promotionStartTime }}</div>
              <div class="text">结束时间：{{ scope.row.promotionEndTime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="是否过期" width="100" align="center">
            <template slot-scope="scope">
              <div class="text">{{ scope.row.publishStatus === 1 ? '过期' : '未过期' }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            width="300"
            align="center"
          />
          <el-table-column
            prop="brandName"
            label="品牌名称"
            width="250"
            align="center"
          />
          <el-table-column
            prop="price"
            label="商品价格"
            width="150"
            align="center"
          />
          <el-table-column
            prop="productCategoryName"
            label="商品类别"
            width="150"
            align="center"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="350"
            align="center"
          />
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" style="color:red" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </el-card>

    <!-- 新增dialog框 -->
    <el-dialog class="dialog" title="热销详情" :visible.sync="dialogTableVisible" width="80%">
      <el-card class="search">
        <div slot="header" class="clearfix">
          <span>条件查询</span>
        </div>
        <div class="text item">
          <el-row>
            <el-form :inline="true" :model="formSearch" class="demo-form-inline">
              <el-col :span="4">
                <el-form-item>
                  <el-input v-model="formSearch.name" size="mini" placeholder="商品名称" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-input v-model="formSearch.productSn " size="mini" placeholder="商品货号" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-select v-model="formSearch.brandId" placeholder="品牌" size="mini">
                    <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-select v-model="formSearch.publishStatus" placeholder="上架状态" size="mini">
                    <el-option label="上架" value="1" />
                    <el-option label="未上架" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-select v-model="formSearch.verifyStatus" placeholder="审核状态" size="mini">
                    <el-option label="审核" value="1" />
                    <el-option label="未审核" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button size="mini" @click="reset">重置</el-button>
                  <el-button type="primary" size="mini" @click="find">查询</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </el-card>

      <!-- 列表 -->
      <el-card class="listbox">
        <div slot="header" class="clearfix">
          商品列表
        </div>

        <!-- 商品table -->
        <el-table
          :data="productList"
          style="width: 100%"
          max-height="500"
          border
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          />
          <el-table-column label="选择" width="100" align="center">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.$index" @change="select(scope.row)">
                {{ '' }}
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column label="商品图片" width="150" align="center">
            <template slot-scope="scope">
              <img class="list_img" :src="scope.row.pic" style="width:100px;height:100px">
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="200" align="center">
            <template slot-scope="scope">
              <div class="text">{{ scope.row.name }}</div>
              <div class="text">品牌：{{ scope.row.brandName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="价格" width="200" align="center">
            <template slot-scope="scope">
              <div class="text">原价：{{ scope.row.price }}</div>
              <div class="text">现价：{{ scope.row.promotionPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="productCategoryName"
            label="商品类别"
            width="100"
            align="center"
          />
          <el-table-column
            prop="weight"
            label="重量"
            width="100"
            align="center"
          />
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>

      <!-- 编辑限时活动 -->
      <el-dialog width="50%" title="编辑限时活动" :visible.sync="innerVisible" append-to-body>
        <el-row type="flex" justify="space-around" class="item">
          <el-col :span="6">
            <div class="text">商品原价 {{ selectList.price }}</div>
          </el-col>
          <el-col :span="6">
            <div class="text">商品名称 {{ selectList.name }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around" class="item">
          <el-col :span="6">
            <div class="text"> 促销价格</div>
            <el-input-number v-model="promotionList.promotionPrice" size="small" :min="0" @change="PriceChange" />
          </el-col>
          <el-col :span="6">
            <div class="text"> 排序</div>
            <el-input-number v-model="promotionList.sort" size="small" :min="0" @change="SortChange" />
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around" class="item">
          <el-col :span="6">
            开始时间
            <el-date-picker
              v-model="promotionList.promotionStartTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始时间"
              @change="timeStart"
            />
          </el-col>
          <el-col :span="6">
            结束时间
            <el-date-picker
              v-model="promotionList.promotionEndTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="结束时间"
              @change="timeEnd"
            />
          </el-col>
        </el-row>
        <el-row :gutter="4" type="flex" justify="space-around" class="item">
          <el-col :span="12" class="el">
            <div class="el-text"> 活动限购数量</div>
            <el-input v-model="promotionList.promotionPerLimit" class="ipt" size="small" placeholder="限购数量" />
          </el-col>
          <el-col :span="8">
            <div class="text"> 图片</div>
            <img class="img" :src="selectList.pic" alt="">
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { findAllRecommends, delRecommend, productsByPage, findAllBrand, addRecommend } from '@/api/market/activity'
export default {
  data() {
    return {
      radio: '',
      list: [],
      brandList: [],
      productList: [],
      dialogTableVisible: false,
      innerVisible: false,
      formSearch: {
        name: '',
        productSn: '',
        brandName: '',
        publishStatus: '',
        verifyStatus: ''
      },
      page: {
        currentPage: 1,
        pageSizes: [10, 20, 30],
        pageSize: 10,
        total: 0
      },
      // 选中详情列表
      selectList: [],
      // 促销活动表
      promotionList: {
        productId: '',
        promotionPrice: '',
        sort: '',
        promotionStartTime: '',
        promotionEndTime: '',
        promotionPerLimit: ''
      }
    }
  },
  computed: {
  },
  created() {
    this.getlists()
    this.getProductList()
  },
  methods: {
    getlists() {
      findAllRecommends().then(res => {
        console.log(res)
        this.list = res.data.items
      })
      findAllBrand().then(res => {
        // console.log(res)
        this.brandList = res.data.items
      })
    },
    getProductList() {
      productsByPage(this.page.currentPage, this.page.pageSize, { ...this.formSearch }).then(res => {
        // console.log(res)
        this.productList = res.data.rows
        this.page.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getProductList()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getProductList()
    },
    del(row) {
      delRecommend(row.recommendId).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getlists()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    // 重置
    reset() {
      this.formSearch = this.$options.data().formSearch
    },
    find() {
      this.page = this.$options.data().page
      this.getProductList()
    },
    select(val) {
      console.log(val)
      this.selectList = val
      this.promotionList.productId = val.id
      this.innerVisible = !this.innerVisible
    },
    // 促销价格
    PriceChange(val) {
      this.promotionList.promotionPrice = val
    },
    // 排序
    SortChange(val) {
      this.promotionList.sort = val
    },
    timeStart(val) {
      this.promotionList.promotionStartTime = val
    },
    timeEnd(val) {
      this.promotionList.promotionEndTime = val
    },
    add() {
      addRecommend({ ...this.promotionList }).then(res => {
        this.$confirm('是否新增最新热销商品', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (res.success) {
            this.dialogTableVisible = false
            this.innerVisible = false
            this.getProductList()
          } else {
            this.$message.error('添加失败')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      })
    }

  }
}
</script>
<style lang="scss" scoped>
  .item{
    margin-bottom: 30px;
  }
  .el{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    height: 50px;
  }
  .ipt{
    width: 160px;
  }
  .el-pagination{
    margin-top: 15px;
  }
  .img{
    width: 160px;
    height: 160px;
  }
</style>
